<!-- 公告详情 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    v-loading="loading"
    width="600px"
    :before-close="close">

    <div class="box">
      <el-descriptions :column="2">
        <el-descriptions-item label="创建人">{{ info.createBy }}</el-descriptions-item>
        <el-descriptions-item label="类型">
          <el-tag :type="typeClass(info.msgType)"> {{ selectDictLabel(message_type, info.msgType) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ info.createTime }}</el-descriptions-item>
      </el-descriptions>

      <div v-html="info.content"></div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getNoticeDetail, setReadMessage } from '@/api/message'

export default {
  props: {
    message_type: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      title: '',
      dialogVisible: false,

      htmlText: '',
      info: ''
    }
  },
  methods: {

    // 打开弹出框
    open(id) {
      this.dialogVisible = true
      this.loading = true
      getNoticeDetail({
        id
      }).then(res => {
        this.info = res.data
        this.title = res.data.title

        // 设置已读
        if (this.info.mark === 1) return this.loading = false
        setReadMessage({
          ids: id
        }).then(res => {
          this.$bus.emit('read')
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      }).catch(err => {
        this.loading = false
      })
    },

    // 关闭弹出框
    close() {
      this.htmlText = ''
      this.dialogVisible = false
      this.info.mark === 0 && this.$emit('close')
    },

    typeClass(e) {
      return {
        0: '',
        1: '',
        2: 'info',
        3: 'warning'
      }[e]
    },

  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-dialog__body {
    padding: 0 20px;
  }
}

.el-descriptions {
  margin-bottom: 20px;
}
</style>
